<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>课程评分</title>
    <link rel="stylesheet" type="text/css" href="/static/css/main.css">
    <link rel="stylesheet" type="text/css" href="/static/css/homepage.css">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">

</head>

<body>
    <div id="indextop" class="header header2 header-theme-none">
        <div class="logo fl">
            <a href="#"></a>
        </div>
        <div class="nav fl">
            <a href="/index">首页</a>
            <c:if test="${user.role.id == 2}">
                <div id="solutiontop" style="float:left;height: 60px;overflow: hidden;">
                    <a target="_blank" style="cursor: pointer;">课程管理</a>
                    <ul id="solutionul">
                        <div style="height:10px;"></div>
                        <li class="solutionli">
                            <a href="/course/courseManagement?page=1">课程管理</a>
                        </li>
                        <li class="solutionli">
                            <a href="/course/courseGrade?page=1&courseId=0">课程评分</a>
                        </li>
                        <div style="height:10px;"></div>
                    </ul>
                </div>
            </c:if>
            <a href="/problem/feedback?stuId=${user.id}&page=1">问题反馈</a>
            <c:if test="${user.role.id == 1}">
                <div id="solutiontop" style="float:left;height: 60px;overflow: hidden;">
                    <a target="_blank" style="cursor: pointer;">用户管理</a>
                    <ul id="solutionul">
                        <div style="height:10px;"></div>
                        <li class="solutionli">
                            <a href="/user/findAllUser?page=1">用户列表</a>
                        </li>
                        <li class="solutionli">
                            <a href="/user/addUser">用户增加</a>
                        </li>

                        <div style="height:10px;"></div>
                    </ul>
                </div>
            </c:if>
            <div id="solutiontop" style="float:left;height: 60px;overflow: hidden;">
                <a target="_blank" style="cursor: pointer;">统计信息</a>
                <ul id="solutionul">
                    <div style="height:10px;"></div>
                    <c:if test="${user.role.id == 1}">
                        <li class="solutionli">
                            <a href="/log/getUserStatistics?page=1">访问统计</a>
                        </li>
                        <li class="solutionli">
                            <a href="/log/getAllLog?page=1">用户访问</a>
                        </li>
                    </c:if>
                    <li class="solutionli">
                        <a href="/log/getLog?userId=${user.id}&page=1">个人访问</a>
                    </li>

                    <div style="height:10px;"></div>
                </ul>
            </div>
        </div>
        <style>
            #solutiontop{
                color: #357ae8;
            }
            #solutiontop:hover{
                /* 这里用auto有时无效，如果高度小于元素加起来的高度有bug */
                height: 500px !important;
                color: #357ae8;
            }
            #solutionul{
                overflow: hidden;
                clear: both;
                background: white;
                width: 120px;
                margin: -5px;
                box-shadow: 0px 0px 5px 1px rgba(80,80,80,0.4);
                position: relative;
                z-index: 1;
            }
            .solutionli a{
                width: 100%;
                text-align: center;
                box-sizing: border-box;
                color: #333 !important;
                padding: 0 10px !important;
                height: 40px !important;
                line-height: 40px !important;
            }
            .solutionli{
                height: 40px;
            }
        </style>
        <div class="log-reg fr">
            <a href="#" class="userName" style="">${user.name}</a>
            <a href="/outLogin" class="outLogin">退出登录</a>

        </div>

    </div>

    <div class="home-page">

        <div class="pop-win"  style="display: none;">
            <div class="pop-win-title">
                <span>

                </span>
            </div>
            <div class="line"></div>
            <div class="pop-win-content">
                <div class="grade">
                    <input class="courseId" type="hidden" value="">
                    <table>
                        <tr>
                            <td class="left">学号</td>
                            <td class="right">
                                <span class="stu-userName"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">姓名</td>
                            <td class="right">
                                <span class="stu-name"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">课程名</td>
                            <td class="right">
                                <span class="courseName"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">班级</td>
                            <td class="right">
                                <select class="grade">
                                    <c:forEach items="${grades}" var="grade" varStatus="status">
                                        <c:if test="${status.count == 1}">
                                            <option value="${grade.id}" selected>${grade.name}</option>
                                        </c:if>
                                        <c:if test="${status.count != 1}">
                                            <option value="${grade.id}">${grade.name}</option>
                                        </c:if>
                                    </c:forEach>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">成绩</td>
                            <td class="right">
                                <input class="score" type="number" placeholder="请输入成绩" value="" max="100">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="line"></div>
            <div class="pop-win-operate">
                <button class="confirm">
                    确定
                </button>
                <button class="calcen">
                    取消
                </button>
            </div>
        </div>

        <div class="wapper">
            <div class="title">
                <span>
                    课程评分
                </span>
                <div class="select">
                    <select >
                        <option value="0">全部</option>
                        <c:forEach items="${myCourses}" var="course">
                            <option value="${course.id}">${course.name}</option>
                        </c:forEach>
                    </select>
                    <button class="query">查询</button>
                </div>
            </div>
            <div class="line"></div>
            <div class="content-title">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm">
                            学号
                        </div>
                        <div class="col-sm center-margin">
                            姓名
                        </div>
                        <div class="col-sm">
                            课程名
                        </div>
                        <div class="col-sm center-margin">
                            班级
                        </div>
                        <div class="col-sm">
                            成绩
                        </div>
                        <div class="col-sm center-margin">
                            操作
                        </div>
                    </div>
                </div>
            </div>

            <div class="content">

                <c:if test="${courses != null}">
                    <c:forEach items="${courses}" var="course" varStatus="status">
                        <c:if test="${status.count % 2 == 1}">
                            <div class="list odd">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-sm">
                                            <input class="stuId" type="hidden" value="${course.stu.id}">
                                            <span>${course.stu.userName}</span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span>${course.stu.name}</span>
                                        </div>
                                        <div class="col-sm">
                                            <input class="courseId" type="hidden" value="${course.id}">
                                            <span>${course.name}</span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <input class="gradeId" type="hidden" value="${course.grade.id}">
                                            <span>${course.grade.name}</span>
                                        </div>
                                        <div class="col-sm">
                                            <span>
                                                    <c:if test="${course.score != 0}">${course.score}</c:if>
                                            </span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span>
                                                <a class="grade" href="#">评分</a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>
                        </c:if>
                        <c:if test="${status.count % 2 == 0}">
                            <div class="list even">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-sm">
                                            <span>${course.stu.userName}</span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span>${course.stu.name}</span>
                                        </div>
                                        <div class="col-sm">
                                            <input class="courseId" type="hidden" value="${course.id}">
                                            <span>${course.name}</span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <input class="gradeId" type="hidden" value="${course.grade.id}">
                                            <span>${course.grade.name}</span>
                                        </div>
                                        <div class="col-sm">
                                            <span>
                                                <c:if test="${course.score != 0}">${course.score}</c:if>
                                            </span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span>
                                                <a class="grade" href="#">评分</a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>
                        </c:if>
                    </c:forEach>
                    <c:if test="${courses.size() < 15}">
                        <c:forEach var="1" begin="${courses.size() + 1}" end="15" varStatus="status">
                            <c:if test="${(status.count + courses.size()) % 2 == 1}">
                                <div class="list odd">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-sm">
                                                <span></span>
                                            </div>
                                            <div class="col-sm center-margin">
                                                <span></span>
                                            </div>
                                            <div class="col-sm">
                                                <span></span>
                                            </div>
                                            <div class="col-sm center-margin">
                                                <span></span>
                                            </div>
                                            <div class="col-sm">
                                                <span></span>
                                            </div>
                                            <div class="col-sm center-margin">
                                                <span></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="line"></div>
                            </c:if>
                            <c:if test="${(status.count + courses.size()) % 2 == 0}">
                                <div class="list even">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-sm">
                                                <span></span>
                                            </div>
                                            <div class="col-sm center-margin">
                                                <span></span>
                                            </div>
                                            <div class="col-sm">
                                                <span></span>
                                            </div>
                                            <div class="col-sm center-margin">
                                                <span></span>
                                            </div>
                                            <div class="col-sm">
                                                <span></span>
                                            </div>
                                            <div class="col-sm center-margin">
                                                <span></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="line"></div>
                            </c:if>
                        </c:forEach>
                    </c:if>
                </c:if>
                <c:if test="${courses == null}">
                    <c:forEach var="1" begin="1" end="15" varStatus="status">
                        <c:if test="${(status.count + courses.size()) % 2 == 1}">
                            <div class="list odd">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-sm">
                                            <span></span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span></span>
                                        </div>
                                        <div class="col-sm">
                                            <span></span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span></span>
                                        </div>
                                        <div class="col-sm">
                                            <span></span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>
                        </c:if>
                        <c:if test="${(status.count + courses.size()) % 2 == 0}">
                            <div class="list even">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-sm">
                                            <span></span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span></span>
                                        </div>
                                        <div class="col-sm">
                                            <span></span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span></span>
                                        </div>
                                        <div class="col-sm">
                                            <span></span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>
                        </c:if>
                    </c:forEach>
                </c:if>

            </div>

            <div style="height: 15px"></div>

            <!-- 分页 -->
            <div class=".pagination">
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center">
                        <c:if test="${page == 1}">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1">上一页</a>
                            </li>
                        </c:if>
                        <c:if test="${page != 1}">
                            <li class="page-item">
                                <a class="page-link" href="#" tabindex="-1">上一页</a>
                            </li>
                        </c:if>
                        <c:if test="${pageItemSize < 6}">
                            <c:forEach var="pageItem" begin="1" end="${pageItemSize}">
                                <c:if test="${page == pageItem}">
                                    <li class="page-item active">
                                        <a class="page-link" href="/course/courseGrade?courseId=${courseId}&page=${pageItem}">${pageItem}</a>
                                    </li>
                                </c:if>
                                <c:if test="${page != pageItem}">
                                    <li class="page-item">
                                        <a class="page-link" href="/course/courseGrade?courseId=${courseId}&page=${pageItem}">${pageItem}</a>
                                    </li>
                                </c:if>
                            </c:forEach>
                        </c:if>

                        <c:if test="${pageItemSize >= 6 && pageItemSize - 2 >= page}">
                            <c:if test="${page > 3}">
                                <!--使页数居中 -->
                                <c:forEach var="pageItem" begin="${page - 2}" end="${page + 2}">
                                    <c:if test="${page == pageItem}">
                                        <li class="page-item active">
                                            <a class="page-link" href="/course/courseGrade?courseId=${courseId}&page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                    <c:if test="${page != pageItem}">
                                        <li class="page-item">
                                            <a class="page-link" href="/course/courseGrade?courseId=${courseId}&page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                </c:forEach>
                            </c:if>
                            <c:if test="${page <= 3}">
                                <c:forEach var="pageItem" begin="1" end="5">
                                    <c:if test="${page == pageItem}">
                                        <li class="page-item active">
                                            <a class="page-link" href="/course/courseGrade?courseId=${courseId}&page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                    <c:if test="${page != pageItem}">
                                        <li class="page-item">
                                            <a class="page-link" href="/course/courseGrade?courseId=${courseId}&page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                </c:forEach>
                            </c:if>

                            <li class="page-item disabled">
                                <a class="page-link" href="#">...</a>
                            </li>
                        </c:if>
                        <c:if test="${pageItemSize >= 6 && pageItemSize - 2 < page}">
                            <c:if test="${page == pageItemSize}">
                                <c:forEach var="pageItem" begin="${pageItemSize - 4 + (pageItemSize - page)}" end="${pageItemSize}">
                                    <c:if test="${page == pageItem}">
                                        <li class="page-item active">
                                            <a class="page-link" href="/course/courseGrade?courseId=${courseId}&page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                    <c:if test="${page != pageItem}">
                                        <li class="page-item">
                                            <a class="page-link" href="/course/courseGrade?courseId=${courseId}&page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                </c:forEach>
                            </c:if>
                            <c:if test="${page != pageItemSize}">
                                <c:forEach var="pageItem" begin="${pageItemSize - 5 + (pageItemSize - page)}" end="${pageItemSize}">
                                    <c:if test="${page == pageItem}">
                                        <li class="page-item active">
                                            <a class="page-link" href="/course/courseGrade?courseId=${courseId}&page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                    <c:if test="${page != pageItem}">
                                        <li class="page-item">
                                            <a class="page-link" href="/course/courseGrade?courseId=${courseId}&page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                </c:forEach>
                            </c:if>
                        </c:if>
                        <c:if test="${page == pageItemSize}">
                            <li class="page-item disabled">
                                <a class="page-link" href="#">下一页</a>
                            </li>
                        </c:if>
                        <c:if test="${page != pageItemSize}">
                            <li class="page-item">
                                <a class="page-link" href="#">下一页</a>
                            </li>
                        </c:if>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/static/js/main.js"></script>
    <script type="text/javascript">
        popActive = "";
        $('.pop-win-operate .confirm').click(function () {
            let courseId = $('.pop-win .pop-win-content .courseId').val();
            let stuId = $('.content .row .stuId').val();
            let stuUserName = $('.pop-win .pop-win-content .stu-userName').text();
            let stuName = $('.pop-win .pop-win-content .stu-name').text();
            let couresName = $('.pop-win .pop-win-content .courseName').text();
            let gradeId = $('.pop-win .pop-win-content .grade  option:selected').val();
            let score = $('.pop-win .pop-win-content .score').val();
            if(score === '') {
                alert("成绩不能为空");
                return false;
            }
            console.log(courseId, stuId, stuUserName,stuName , couresName, gradeId, score);

            let data = {
                id: courseId,
                name: couresName,
                grade: {
                    id: gradeId
                },
                stu: {
                    id: stuId,
                    userName: stuUserName,
                    name: stuName
                },
                score: score
            };
            $.ajax({
                type: 'PUT',
                dataType:'json',
                data: JSON.stringify(data),
                url: '/course/courseGrade',
                contentType:"application/json",
                success: function (result) {
                    if(result.code === 1) {
                        alert(result.msg);
                        // 刷新页面
                        window.location.href = window.location.href;
                    }else {
                        alert(result.msg);
                    }
                }
            });

            $('.pop-win').css('display', 'none');
        });

        $('.pop-win-operate .calcen').click(function () {
            $('.pop-win').css('display', 'none');
        });

        $('.title .select button.query').click(function () {
            var courseId = $('.title .select option:selected');
            window.location.href = window.location.pathname + "?page=1&courseId=" + courseId.val();
        });


        /**
         *  评分
         */
        $('.content .row .grade').click(function (event) {
            popActive = "grade";
            //  取消默认事件行为
            event.preventDefault();

            //  改弹出框名称
            $('.pop-win .pop-win-title span').text('评分');
            //  改为可见
            $('.pop-win').css('display', 'block');

            this.id += "updateClick";
            let prevs = $('#updateClick').parent().parent().prevAll();
            let spans = prevs.children('span');
            let inputs = prevs.children('input');
            $('#updateClick').removeAttr("id");

            let stuUserName = spans[4].innerHTML;
            let stuName = spans[3].innerHTML;
            let courseName = spans[2].innerHTML;
            let gradeName = spans[1].innerHTML;
            let score = spans[0].innerHTML.trim();
            let courseId = inputs[1].value;
            let gradeId = inputs[0].value;

            $('.pop-win .pop-win-content .courseId').val(courseId);
            $('.pop-win .pop-win-content .stu-userName').text(stuUserName);
            $('.pop-win .pop-win-content .stu-name').text(stuName);
            $('.pop-win .pop-win-content .courseName').text(courseName);
            $('.pop-win .pop-win-content .grade').val(gradeId);
            $('.pop-win .pop-win-content .score').val(score);
        });

    </script>

</body>
</html>